@import "partials/var"
@import "partials/reset"
@import "partials/mixin"

$directions = {t: top, r: right, b: bottom, l: left, v: top bottom, h: left right}

/****************************
*        字体大小            *
* **************************/
for size in range(10, 50, 2)
  .fz-{size}
    font-size: size px

/****************************
*   文字颜色，背景色，边框    *
* **************************/
for $clazz, $color in $colors
  .{$clazz}
    if match('bg', $clazz)
      background-color: $color
    else if match('bd', $clazz)
      bd(a, $color)
    else
      color: $color

for $d in $directions
  .bd{$d}
    bd($d)

/****************************
*        常用间距            *
* **************************/
gap($size)
  if $size
    $suffix = - $size
  else
    $size = 20
    $suffix = ''

  .mg{$suffix}
    margin: $size px
  .pd{$suffix}
    padding: $size px
  for $d, $dirs in $directions
    .mg{$d}{$suffix}
      for $dir in $dirs
        margin-{$dir}: $size px
    .pd{$d}{$suffix}
      for $dir in $dirs
        padding-{$dir}: $size px

for $size in range(6, 60, 2)
  gap($size)

gap(0)
/****************************
*           position        *
* **************************/
for $pos in relative absolute fixed
  .{$pos}
    position: $pos

/****************************
*          display          *
* **************************/
for $dis in block inline-block none
  .{$dis}
    display: $dis

.flex
  display flex
  align-items center
  for $i in 1..3
    > .flex-{$i}
      flex-grow: $i
.column
  flex-direction column
.flex-wrap
  flex-wrap wrap
.around
  justify-content: space-around
.between
  justify-content: space-between
.stretch
  align-items: stretch
/****************************
*          align            *
* **************************/
.center, .txt-center
  text-align: center

.txt-right
  text-align: right

.txt-left
  text-align left

.center-h
  position: relative
  left: 50%
  transform: translate3d(-50%, 0, 0)

.center-v
  position: relative
  top: 50%
  transform: translate3d(0, -50%, 0)

.center-a
  position: relative
  top: 50%
  left: 50%
  transform: translate3d(-50%, -50%, 0)

/****************************
*           常用组件         *
* **************************/
.scrollable
  -webkit-overflow-scrolling: touch
  overflow-x: auto
  white-space: nowrap
  > *
    display: inline-block

$line-clamp
  overflow: hidden
  word-break: break-all

  text-overflow: ellipsis
  line-height: 1.2

.line-clamp, .line-clamp-1
  @extends $line-clamp
  -webkit-line-clamp: 1
  white-space: nowrap

.line-clamp-2
  @extends $line-clamp
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-line-clamp: 2

.line-clamp-3
  @extends $line-clamp
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-line-clamp: 3

.line-clamp-4
  @extends $line-clamp
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-line-clamp: 4

.round
  border-radius: 50%

.bold
  font-weight: bold

html
  font-family -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif
  user-select none
  touch-action manipulation

body.overflow
  overflow hidden

.empty-data
  width 207px
  height 225px
  background url('../assets/empty.png') no-repeat
  background-size cover
  margin 200px auto 0

.flex-scrollable
  flex-wrap nowrap
  overflow-x scroll
  -webkit-overflow-scrolling touch

img[lazy=loading], img[lazy=error]
  width 100%
  height 100%
  margin auto
  background-size cover
  background-position center
  &.landscape
    background-image url("../assets/landscape_default.png")
  &.portrait
    background-image url("../assets/portrait_default.png")

@keyframes loading-frame
  0%
    background-image url("../assets/loading/l1.png")
  100%
    background-image url("../assets/loading/l30.png")
  for size in 1..30
    {3.3% * size}
      background-image url("../assets/loading/l" + size + ".png")

.loading
  &::before
    animation loading-frame 1s infinite
    background-size 120px 120px
    background-repeat no-repeat
    background-position center
    content ''
    display block
    position fixed
    z-index 999
    width 100%
    height 100%
    max-width 750px;/*no*/
  &.detail
    &::before
      background-position center 300px

